import "./index.less";
import {Fetch} from  '../../libs/';
import {connect} from  'react-redux';
import {fetch} from  '../../stores/action';
import {Url, md5Url} from  '../../libs/Url';
import {parseSearch} from  '../../libs/utils';
import {Scrollbars} from 'react-custom-scrollbars'
import CSS from '../../libs/CSS'

const stateArr = [
    {text: '活动预告', color: 'rgb(55,206,251)'},
    {text: '进行中  ', color: 'rgb(251,153,65)'},
    {text: '活动回看', color: 'rgb(204,204,204)'}
];

class Activity extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            active: 1,
            photo: 1
        }
    }

    componentDidMount() {
        const {dispatch} = this.props;
        let clientInfo = parseSearch();
        if (clientInfo && clientInfo.clientid) {
            Fetch(Url.GET_CLASS, {body: {deviceid: clientInfo.clientid}})
                .then((res)=> {
                    if (res['class'] && res['class'].classid) {
                        clientInfo['class'] = res['class'];
                        clientInfo['school'] = res['school'];
                        clientInfo['device'] = res['device'];
                        clientInfo['classroom'] = res['classroom'];
                        // dispatch(clientInfoSet(clientInfo));

                        dispatch(fetch({
                            url: Url.ACTIVITY, classid: res['class'].classid
                        }));
                        // dispatch(fetch({url: Url.HOME, classid: clientInfo.classid}));
                    } else {
                        alert('设备码没有跟班级对应，请核验!')
                    }
                })
                .catch(e=> {
                    console.log(e)
                })
        } else {
            alert('设备码不合法，请核验!')
        }
    }

    _getState(starttime, endtime) {
        let date = new Date();
        let time = date.getTime();
        let start = CSS.parseTime(starttime);
        let end = CSS.parseTime(endtime);
        if(time < start) return 0;
        if(time > start && time < end) return 1;
        if(time > end) return 2;
    }

    render() {
        let data = this.props[md5Url.ACTIVITY];
        data = data.campaigns ? data : {campaigns: [{}]};
        const item_ = data.campaigns.length ? data.campaigns[0] : {};
        return (
            <div className="activty clearfix" style={{}}>
                <div className="panel-item panel1 container-border">
                    {!item_.fileids ? null :
                        <div
                            style = {{
                                padding: 0,
                                width: CSS.pixel(452),
                                height: CSS.pixel(339),
                                backgroundImage: CSS.parseBackgroundImage(Url.FUN_UPLOAD_PREVIEW(item_.fileids)),
                                backgroundSize: '100% 100%',
                                backgroundRepeat: 'no-repeat'
                            }}
                        />
                    }
                    <div>
                        <div className="title">
                            {item_.name}
                        </div>
                        <p className="time">时间：{item_.starttime} ~ {item_.endtime}</p>
                        <p>
                            {item_.summary}
                        </p>
                    </div>
                </div>
                <div className="panel-item panel2 container-border">
                    <div className="news-board"
                         style={{
                             backgroundSize: '100% 100%',
                             height: (window.innerHeight - 45 - 30 - 40 * 2 - 180 - 120 - 15)
                         }}>
                        {
                            data.campaigns.slice(1, 4).map((item, index)=> {
                                return <div key={index} className="item">
                                    {!item.fileids ? null :
                                        <img src={item.fileids ? Url.FUN_UPLOAD_PREVIEW(item.fileids) : require('../../imgs/no_activity.png')} alt="" style ={{width: CSS.pixel(160), height: CSS.pixel(160)}}/>
                                    }
                                    <div>
                                        <div>
                                            <span className="category">{item.classify ? item.classify.name+'：' : ''}</span>
                                            {item.name}
                                        </div>
                                        <p className="time">时间：{item.starttime} ~ {item.endtime}</p>
                                        <p>
                                            {CSS.textLimit(item.summary, 60)}
                                        </p>
                                        <div className="notStart" style = {{backgroundColor: item.starttime && item.endtime ? stateArr[this._getState(item.starttime, item.endtime)].color : null}}>{item.starttime && item.endtime ? stateArr[this._getState(item.starttime, item.endtime)].text : '活动预告'}</div>
                                    </div>
                                </div>
                            })
                        }
                    </div>
                </div>
            </div>
        )
    }
}

const select = state => {
    return {
        clientInfo: state.clientInfo,
        [md5Url.ACTIVITY]: state.fetchBySubject[md5Url.ACTIVITY]
    }
};

export default connect(select)(Activity)